<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-else  实现原理</title>
</head>
<body>
<div id="change" class="change">
  <h1 data-if="status" style="background-color: red">Hello, World!</h1>
  <h1 data-else style="background-color: green">Hello, World!</h1>
</div>

<script>
  let status = true

  let toggle = status
  let elements = document.querySelectorAll("#change > h1");
  console.log(elements);

  for (let i = 0; i < elements.length; i++) {
    let element = elements[i]

    if (element.hasAttribute("data-if")) {
      let attributeValue  = element.getAttribute("data-if");
      console.log(attributeValue);

      if (eval(attributeValue)) {
        element.removeAttribute("data-if")

      }
      else {
        // 删除元素自身
        // element.parentNode.removeChild(element)
        // 使用注释替换当前的节点
        // 创建一个注释节点
        let comment = document.createComment("data-if");
        let parentNode = element.parentNode;
        element.parentNode.replaceChild(comment, element);
      }
    }
    if (element.hasAttribute("data-else")) {
      if (!toggle){
        element.removeAttribute("data-else")
      }
      else {
        // element.parentNode.removeChild(element)
        // 使用注释替换当前的节点
        // 创建一个注释节点
        let comment = document.createComment("data-if");
        let parentNode = element.parentNode;
        element.parentNode.replaceChild(comment, element);
      }
    }
  }
</script>
</body>
</html>